<template>
  <div class="bg-zinc-100 p-1 rounded" style="background: #fafafb">
    <div class="w-full flex">
      <div class="h-full">
        <img
          :src="item.user.avatarUrl"
          class="w-3 h-3 rounded-[9999px] object-cover mr-1"
          alt=""
        />
      </div>
      <div class="w-full">
        <div class="flex items-center w-full justify-between">
          <div class="flex items-center">
            <div class="text-sm text-zinc-800 font-bold mr-1">
              {{ item.user.nickName }}
            </div>
            <!-- <div
              class="w-0.5 h-0.5 rounded-[100%] bg-slate-400 ml-0.5 mr-0.5"
            ></div>
            <div class="text-sm text-zinc-500 mr-1">
              {{ item.user.occupation }}
            </div> -->
            <div v-if="item.reply" class="text-sm text-zinc-400 mr-1">回复</div>
            <div v-if="item.reply" class="text-sm text-zinc-800 font-bold mr-1">
              {{ item.reply.user.nickName }}
            </div>
          </div>
          <div class="text-sm text-zinc-400">
            {{ useTimeAgo(item.createTime) }}
          </div>
        </div>
        <div
          v-html="item.content"
          class="text-base text-zinc-500 mt-1 mb-1 w-full"
        ></div>
        <div
          v-if="item.reply"
          v-html="`“${item.reply.content}”`"
          class="rounded border border-gray-300 mb-1 p-1 text-sm text-zinc-500"
          style="background: #f2f3f5; border: 1px solid #e4e6eb"
        ></div>
        <div class="flex items-center">
          <!-- TODO -->
          <div
            class="
              flex
              items-center
              mr-2
              cursor-pointer
              hover:text-blue-500
              text-zinc-400
            "
          >
            <van-icon name="like-o" class="" />
            <span class="text-sm ml-0.5"> 点赞(TODO) </span>
          </div>
          <div
            class="
              flex
              items-center
              cursor-pointer
              hover:text-blue-500
              text-zinc-400
            "
            @click="handleReply"
          >
            <van-icon name="chat-o" class="" />
            <span class="text-sm ml-0.5">
              {{ item.isShowInput ? "取消回复" : "回复" }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <CommentInput
      ref="commentInputRef"
      v-if="item.isShowInput"
      class="mt-1"
      :isAvatar="false"
      :replyid="item.id"
      :pid="props.pid"
      :postid="props.postid"
      @sendComment="sendComment"
      @blurChange="blurChange"
    ></CommentInput>
  </div>
</template>

<script setup>
import CommentInput from "./CommentInput.vue";
import moment from "moment";
import { nextTick, ref } from "vue";
import { onClickOutside, useTimeAgo } from "@vueuse/core";
const commentInputRef = ref(null);
onClickOutside(commentInputRef, (event) => {
  emits("handleReply");
});
const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
  pid: {
    type: [Number, String],
    default: 0,
  },
  postid: {
    type: [Number, String],
    default: 0,
  },
});

const emits = defineEmits(["handleReply", "sendComment", "blurChange"]);
const sendComment = () => {
  emits("sendComment");
};
const blurChange = () => {
  emits("blurChange");
};
const handleReply = () => {
  emits("handleReply");
  // 输入框显示 获取焦点
  if (props.item.isShowInput) {
    nextTick(() => {
      commentInputRef.value.focusDiv();
    });
  }
};
</script>

<style>
</style>